<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>退票 - 前台仪表盘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }
        
        .nav-links a:hover {
            opacity: 0.8;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .welcome-section {
            background: white;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .management-section {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.2s;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn-secondary {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }
        
        .refund-policy {
            background: white;
            border-left: 4px solid #667eea;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .policy-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .policy-item {
            text-align: center;
            padding: 20px;
            transition: transform 0.3s;
        }
        
        .policy-item:hover {
            transform: translateY(-5px);
        }
        
        .policy-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .search-section {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .search-input {
            flex: 1;
            padding: 12px 15px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .search-input:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
        }
        
        .search-form {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .ticket-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            transition: transform 0.3s;
        }
        
        .ticket-card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 25px;
            border-radius: 15px 15px 0 0;
            border-bottom: none;
        }
        
        .card-body {
            padding: 25px;
        }
        
        .ticket-info {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
        }
        
        .info-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .info-table td {
            padding: 8px 0;
            border-bottom: 1px solid #e1e1e1;
        }
        
        .info-table td:first-child {
            color: #666;
            width: 30%;
        }
        
        .info-table td:last-child {
            font-weight: 500;
        }
        
        .refund-info {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .alert {
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        
        .alert-warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 15px;
            width: 80%;
            max-width: 500px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px 25px;
            border-radius: 15px 15px 0 0;
            border-bottom: none;
        }
        
        .modal-body {
            padding: 25px;
        }
        
        .modal-footer {
            border-top: 1px solid #e1e1e1;
            padding: 15px 25px 25px;
            text-align: right;
        }
        
        .modal-title {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
        }
        
        .close {
            position: absolute;
            right: 15px;
            top: 15px;
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            opacity: 0.8;
        }
        
        .close:hover {
            opacity: 1;
        }
        
        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 15px 0;
        }
        
        .no-data {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
            color: #666;
            font-style: italic;
            padding: 40px;
        }
        
        .badge {
            display: inline-block;
            padding: 0.35em 0.65em;
            font-size: 0.75em;
            font-weight: 700;
            line-height: 1;
            color: #fff;
            text-align: center;
            white-space: nowrap;
            vertical-align: baseline;
            border-radius: 0.375rem;
        }
        
        .badge.bg-success {
            background-color: #28a745;
        }
        
        .badge.bg-danger {
            background-color: #dc3545;
        }
        
        .badge.bg-secondary {
            background-color: #6c757d;
        }
        
        .badge.bg-primary {
            background-color: #667eea;
        }
        
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }
        
        .col-12 {
            flex: 0 0 100%;
            max-width: 100%;
            padding: 0 15px;
        }
        
        .col-md-6 {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 15px;
        }
        
        .col-md-8 {
            flex: 0 0 66.666667%;
            max-width: 66.666667%;
            padding: 0 15px;
        }
        
        .col-md-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
            padding: 0 15px;
        }
        
        .input-group {
            display: flex;
            align-items: center;
            width: 100%;
        }
        
        .input-group-text {
            background-color: #e9ecef;
            border: 1px solid #ced4da;
            border-right: none;
            padding: 12px 15px;
            border-radius: 8px 0 0 8px;
            color: #495057;
        }
        
        .form-control {
            flex: 1;
            padding: 12px 15px;
            border: 1px solid #ced4da;
            border-radius: 0 8px 8px 0;
            font-size: 14px;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }
        
        .form-check {
            display: block;
            min-height: 1.5rem;
            padding-left: 1.5em;
        }
        
        .form-check-input {
            width: 1em;
            height: 1em;
            margin-top: 0.25em;
            vertical-align: top;
            background-color: #fff;
            border: 1px solid rgba(0,0,0,.25);
            border-radius: 0.25em;
            margin-left: -1.5em;
        }
        
        .form-check-label {
            cursor: pointer;
        }
        
        .text-primary {
            color: #667eea !important;
        }
        
        .text-success {
            color: #28a745 !important;
        }
        
        .text-danger {
            color: #dc3545 !important;
        }
        
        .text-warning {
            color: #ffc107 !important;
        }
        
        .text-muted {
            color: #6c757d !important;
        }
        
        .fw-bold {
            font-weight: bold !important;
        }
        
        .mb-0 {
            margin-bottom: 0 !important;
        }
        
        .mb-3 {
            margin-bottom: 1rem !important;
        }
        
        .mt-3 {
            margin-top: 1rem !important;
        }
        
        .mt-4 {
            margin-top: 1.5rem !important;
        }
        
        .me-1 {
            margin-right: 0.25rem !important;
        }
        
        .me-2 {
            margin-right: 0.5rem !important;
        }
        
        .ms-2 {
            margin-left: 0.5rem !important;
        }
        
        .w-100 {
            width: 100% !important;
        }
        
        .d-flex {
            display: flex !important;
        }
        
        .justify-content-between {
            justify-content: space-between !important;
        }
        
        .table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
            border-collapse: collapse;
        }
        
        .table-sm td {
            padding: 0.5rem;
            border-bottom: 1px solid #dee2e6;
        }
        
        .table-borderless td {
            border: 0;
        }
        
        .table-success {
            background-color: rgba(212, 237, 218, 0.5);
        }
        
        .py-5 {
            padding-top: 3rem !important;
            padding-bottom: 3rem !important;
        }
        
        .btn-outline-primary {
            color: #667eea;
            border: 1px solid #667eea;
            background: white;
        }
        
        .btn-outline-primary:hover {
            background-color: #667eea;
            color: white;
        }
        
        .btn-close {
            box-sizing: content-box;
            width: 1em;
            height: 1em;
            padding: 0.25em 0.25em;
            color: #000;
            background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='m.235.867 8 8a.5.5 0 0 1 0 .706l-8 8a.5.5 0 0 1-.706-.706L7.293 9.5.529 2.735a.5.5 0 0 1 .706-.706z'/%3e%3c/svg%3e") center/1em auto no-repeat;
            border: 0;
            border-radius: 0.375rem;
            opacity: .5;
        }
        
        .btn-close:hover {
            color: #000;
            text-decoration: none;
            opacity: .75;
        }

        @media (max-width: 768px) {
            .col-md-6 {
                flex: 0 0 100%;
                max-width: 100%;
                margin-bottom: 20px;
            }
            
            .col-md-8 {
                flex: 0 0 100%;
                max-width: 100%;
                margin-bottom: 15px;
            }
            
            .col-md-4 {
                flex: 0 0 100%;
                max-width: 100%;
            }
            
            .search-form {
                flex-direction: column;
                gap: 10px;
            }
            
            .search-input {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">🎬 前台控制台</div>
            <div class="nav-links">
                <a href="/receptionist/dashboard">控制台</a>
                <a href="/receptionist/movies">影片信息</a>
                <a href="/receptionist/screenings">场次信息</a>
                <a href="/receptionist/sell-ticket">售票功能</a>
                <a href="/receptionist/refund-ticket">退票功能</a>
                <a href="/receptionist/sold-tickets">已售票据</a>
            </div>
            <div class="user-info">
                <span th:text="|前台：${session.user != null ? session.user.username : '未登录'}|">前台</span>
                <a href="/auth/logout" class="btn btn-sm">退出登录</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <div class="welcome-section">
            <h1>🎫 退票服务</h1>
            <p>为您提供便捷的退票服务</p>
        </div>

        <!-- 退票政策说明 -->
        <div class="refund-policy">
            <h3 class="section-title">📋 退票政策</h3>
            <div class="policy-grid">
                <div class="policy-item">
                    <div class="policy-icon">⏰</div>
                    <h4>退票时间</h4>
                    <p>电影开场前1小时可退票</p>
                </div>
                <div class="policy-item">
                    <div class="policy-icon">💰</div>
                    <h4>退票费用</h4>
                    <p>提前1天：全额退款<br>提前1小时：扣除10%手续费</p>
                </div>
                <div class="policy-item">
                    <div class="policy-icon">🎟️</div>
                    <h4>退票凭证</h4>
                    <p>请提供完整的电子票号</p>
                </div>
            </div>
        </div>

        <!-- 查询电子票 -->
        <div class="management-section">
            <div class="search-section">
                <h6 class="mb-3">
                    🔍 查询电子票信息
                </h6>
                <form id="searchForm" class="search-form">
                    <div class="input-group" style="flex: 1;">
                        <span class="input-group-text">🎫</span>
                        <input type="text" class="form-control search-input" id="ticketNumber" 
                               placeholder="请输入电子票号（TK开头）或订单号（ORD开头）" 
                               maxlength="20" required>
                    </div>
                    <button type="submit" class="btn" style="background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3);">
                        🔍 查询票务信息
                    </button>
                </form>
            </div>
        </div>

        <!-- 查询结果 -->
        <div id="searchResult" style="display: none;">
            <div class="ticket-card">
                <div class="card-header">
                    <h6 class="mb-0">
                        🎫 电子票信息
                        <span class="badge bg-primary ms-2" id="ticketStatus"></span>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="ticket-info">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary mb-3">基本信息</h6>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="30%">电子票号：</td>
                                        <td class="fw-bold" id="displayTicketNumber"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">影片名称：</td>
                                        <td class="fw-bold" id="movieTitle"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">放映厅：</td>
                                        <td id="roomName"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">放映时间：</td>
                                        <td id="screeningTime"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">座位号：</td>
                                        <td class="text-success fw-bold" id="seatNumbers"></td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary mb-3">费用信息</h6>
                                <table class="table table-sm table-borderless">
                                    <tr>
                                        <td class="text-muted" width="30%">票型：</td>
                                        <td id="ticketType"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">单价：</td>
                                        <td>¥<span id="unitPrice"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">数量：</td>
                                        <td id="ticketCount"></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">总金额：</td>
                                        <td class="text-success fw-bold">¥<span id="totalAmount"></span></td>
                                    </tr>
                                    <tr>
                                        <td class="text-muted">购买时间：</td>
                                        <td id="purchaseTime"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 退票信息 -->
                    <div id="refundInfo" class="mt-4" style="display: none;">
                        <hr>
                        <h6 class="text-warning mb-3">
                            💰 退票费用计算
                        </h6>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="alert alert-info">
                                    <div class="d-flex justify-content-between">
                                        <span>原票价：</span>
                                        <span>¥<span id="refundOriginalAmount"></span></span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span>手续费：</span>
                                        <span class="text-danger">-¥<span id="refundFee"></span></span>
                                    </div>
                                    <hr style="margin: 0.5rem 0;">
                                    <div class="d-flex justify-content-between fw-bold">
                                        <span>退款金额：</span>
                                        <span class="text-success">¥<span id="refundAmount"></span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="alert alert-warning">
                                    <h6>⚠️ 退票提醒</h6>
                                    <ul class="mb-0 small">
                                        <li>退票后座位将重新开放售卖</li>
                                        <li>退款将在3-5个工作日内到账</li>
                                        <li>退票操作不可撤销，请谨慎操作</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div style="text-align: center; margin-top: 1.5rem;">
                        <button type="button" class="btn btn-secondary me-2" onclick="clearSearch()">
                            ❌ 清除查询
                        </button>
                        <button type="button" class="btn btn-danger" id="refundButton" onclick="confirmRefund()" style="display: none;">
                            ↩️ 确认退票
                        </button>
                        <button type="button" class="btn btn-secondary" id="cannotRefundButton" style="display: none;" disabled>
                            🚫 无法退票
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 无查询结果 -->
        <div id="noResult" style="display: none;">
            <div class="no-data">
                <div style="font-size: 3rem; margin-bottom: 1rem;">🔍</div>
                <h5 class="text-muted">未找到电子票信息</h5>
                <p class="text-muted">请检查电子票号是否正确，或联系客服咨询</p>
                <button type="button" class="btn btn-outline-primary" onclick="clearSearch()">
                    🔍 重新查询
                </button>
            </div>
        </div>
    </div>

    <!-- 确认退票模态框 -->
    <div class="modal" id="refundModal">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger">
                    ⚠️ 确认退票
                </h5>
                <button type="button" class="close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="alert alert-danger">
                    <h6>⚠️ 重要提醒</h6>
                    <p class="mb-0">您即将退票，此操作不可撤销。请确认以下信息：</p>
                </div>
                
                <table class="table table-sm">
                    <tr>
                        <td class="text-muted">电子票号：</td>
                        <td class="fw-bold" id="confirmTicketNumber"></td>
                    </tr>
                    <tr>
                        <td class="text-muted">影片：</td>
                        <td id="confirmMovieTitle"></td>
                    </tr>
                    <tr>
                        <td class="text-muted">场次：</td>
                        <td id="confirmScreeningTime"></td>
                    </tr>
                    <tr>
                        <td class="text-muted">座位：</td>
                        <td id="confirmSeatNumbers"></td>
                    </tr>
                    <tr class="table-success">
                        <td class="text-muted fw-bold">退款金额：</td>
                        <td class="text-success fw-bold">¥<span id="confirmRefundAmount"></span></td>
                    </tr>
                </table>
                
                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="confirmCheckbox">
                    <label class="form-check-label" for="confirmCheckbox">
                        我已确认退票信息无误，同意执行退票操作
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">取消</button>
                <button type="button" class="btn btn-danger" id="processRefundButton" onclick="processRefund()" disabled>
                    ✓ 确认退票
                </button>
            </div>
        </div>
    </div>

    <script>
        let currentTicketData = null;
        
        document.getElementById('searchForm').addEventListener('submit', function(e) {
            e.preventDefault();
            searchTicket();
        });
        
        document.getElementById('confirmCheckbox').addEventListener('change', function() {
            document.getElementById('processRefundButton').disabled = !this.checked;
        });
        
        function searchTicket() {
            const ticketNumber = document.getElementById('ticketNumber').value.trim();
            
            if (!ticketNumber) {
                alert('请输入电子票号');
                return;
            }
            
            // 隐藏之前的结果
            document.getElementById('searchResult').style.display = 'none';
            document.getElementById('noResult').style.display = 'none';
            
            fetch('/receptionist/ticket-info?ticketNumber=' + encodeURIComponent(ticketNumber))
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        currentTicketData = data.ticket;
                        displayTicketInfo(data.ticket);
                    } else {
                        document.getElementById('noResult').style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('查询失败，请重试');
                });
        }
        
        function displayTicketInfo(ticket) {
            // 填充票务信息
            document.getElementById('displayTicketNumber').textContent = ticket.ticketNumber;
            document.getElementById('movieTitle').textContent = ticket.movieTitle;
            document.getElementById('roomName').textContent = ticket.roomName;
            document.getElementById('screeningTime').textContent = new Date(ticket.screeningTime).toLocaleString('zh-CN');
            document.getElementById('seatNumbers').textContent = ticket.seatNumbers;
            document.getElementById('ticketType').textContent = getTicketTypeName(ticket.ticketType);
            document.getElementById('unitPrice').textContent = ticket.unitPrice;
            document.getElementById('ticketCount').textContent = ticket.ticketCount;
            document.getElementById('totalAmount').textContent = ticket.totalAmount;
            document.getElementById('purchaseTime').textContent = new Date(ticket.purchaseTime).toLocaleString('zh-CN');
            
            // 设置票务状态
            const statusBadge = document.getElementById('ticketStatus');
            if (ticket.status === 'VALID') {
                statusBadge.textContent = '有效';
                statusBadge.className = 'badge bg-success ms-2';
            } else if (ticket.status === 'REFUNDED') {
                statusBadge.textContent = '已退票';
                statusBadge.className = 'badge bg-danger ms-2';
            } else {
                statusBadge.textContent = '已使用';
                statusBadge.className = 'badge bg-secondary ms-2';
            }
            
            // 检查是否可以退票
            const canRefund = checkRefundEligibility(ticket);
            
            if (canRefund.eligible) {
                // 显示退票信息
                document.getElementById('refundInfo').style.display = 'block';
                document.getElementById('refundOriginalAmount').textContent = ticket.totalAmount;
                document.getElementById('refundFee').textContent = canRefund.fee;
                document.getElementById('refundAmount').textContent = canRefund.refundAmount;
                
                document.getElementById('refundButton').style.display = 'inline-block';
                document.getElementById('cannotRefundButton').style.display = 'none';
            } else {
                document.getElementById('refundInfo').style.display = 'none';
                document.getElementById('refundButton').style.display = 'none';
                document.getElementById('cannotRefundButton').style.display = 'inline-block';
                document.getElementById('cannotRefundButton').textContent = canRefund.reason;
            }
            
            document.getElementById('searchResult').style.display = 'block';
        }
        
        function checkRefundEligibility(ticket) {
            const now = new Date();
            const screeningTime = new Date(ticket.screeningTime);
            const timeDiff = screeningTime.getTime() - now.getTime();
            const hoursDiff = timeDiff / (1000 * 60 * 60);
            
            if (ticket.status !== 'VALID') {
                return {
                    eligible: false,
                    reason: '票据状态不允许退票'
                };
            }
            
            if (hoursDiff < 1) {
                return {
                    eligible: false,
                    reason: '开场前1小时内不可退票'
                };
            }
            
            // 计算退票费用
            const totalAmount = parseFloat(ticket.totalAmount);
            let fee = 0;
            
            if (hoursDiff >= 24) {
                // 提前一天，全额退款
                fee = 0;
            } else {
                // 提前1小时到24小时，扣除10%手续费
                fee = Math.round(totalAmount * 0.1 * 100) / 100;
            }
            
            const refundAmount = totalAmount - fee;
            
            return {
                eligible: true,
                fee: fee,
                refundAmount: refundAmount
            };
        }
        
        function getTicketTypeName(ticketType) {
            switch(ticketType) {
                case 'adult': return '成人票';
                case 'child': return '儿童票';
                case 'student': return '学生票';
                default: return '普通票';
            }
        }
        
        function clearSearch() {
            document.getElementById('ticketNumber').value = '';
            document.getElementById('searchResult').style.display = 'none';
            document.getElementById('noResult').style.display = 'none';
            currentTicketData = null;
        }
        
        function confirmRefund() {
            if (!currentTicketData) {
                alert('请先查询票务信息');
                return;
            }
            
            // 填充确认信息
            document.getElementById('confirmTicketNumber').textContent = currentTicketData.ticketNumber;
            document.getElementById('confirmMovieTitle').textContent = currentTicketData.movieTitle;
            document.getElementById('confirmScreeningTime').textContent = new Date(currentTicketData.screeningTime).toLocaleString('zh-CN');
            document.getElementById('confirmSeatNumbers').textContent = currentTicketData.seatNumbers;
            
            const refundInfo = checkRefundEligibility(currentTicketData);
            document.getElementById('confirmRefundAmount').textContent = refundInfo.refundAmount;
            
            // 重置确认复选框
            document.getElementById('confirmCheckbox').checked = false;
            document.getElementById('processRefundButton').disabled = true;
            
            document.getElementById('refundModal').style.display = 'block';
        }
        
        function closeModal() {
            document.getElementById('refundModal').style.display = 'none';
        }
        
        function processRefund() {
            if (!currentTicketData) {
                alert('票务信息丢失，请重新查询');
                return;
            }
            
            const refundData = {
                ticketNumber: currentTicketData.ticketNumber
            };
            
            fetch('/receptionist/process-refund', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(refundData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('退票成功！退款金额将在3-5个工作日内到账。');
                    closeModal();
                    clearSearch();
                } else {
                    alert('退票失败：' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('退票失败，请重试');
            });
        }
        
        // 点击模态框外部关闭模态框
        window.onclick = function(event) {
            const modal = document.getElementById('refundModal');
            if (event.target == modal) {
                closeModal();
            }
        }
    </script>
</body>
</html>